<template>
    <!-- 标签页组件 -->
    <div class="tabs">
       <!-- 使用 Element UI 的标签组件，循环渲染标签 -->
       <el-tag size="small" v-for="tag in tags" 
       :key="tag.name" 
       :closable="canCloseTag(tag)"
       @click="changeMenu(tag)">
       {{tag.label}}
       </el-tag>
    </div> 
</template>

<script>
import { mapState } from 'vuex'
export default {
    computed: {
        // 使用 mapState 将 Vuex 中的 tabsList 映射到组件的 tags 属性
        ...mapState({
            tags: state => state.tabsList
        })
    },
    methods: {
        // 切换标签页的方法
        changeMenu(item) {
            this.$router.push({ name: item.name })
        },
        // 根据标签是否为当前标签或首页标签来判断是否可关闭
        canCloseTag(tag) {
            return this.$route.name !== tag.name && tag.name !== 'home'
        }
    }
}
</script>

<style scoped>
.tabs {
    padding: 15px;
}
.el-tag {
    margin-right: 15px;
    cursor: pointer;
}
</style>